<template>
  <div ref="scrollview" class="container-water-fall">
    <waterfall
      :col="col"
      :data="homeList"
      @loadmore="loadmore"
      :lazy-distance="20"
      :load-distance="300"
      :gutterWidth="gutterWidth"
    >
      <template>
        <div class="cell-item" v-for="(item, index) in homeList" :key="index">
          <div style="position: relative">
            <img class="video-picture" :src="item.coverPath" />
            <div class="video-number">
              <span class="iconfont icon-aixin">{{
                item.likeCounts | filterDotNumber
              }}</span>
              <span class="video-time">{{
                item.worksSeconds | formatSec
              }}</span>
            </div>
          </div>
          <div class="cell-itm-word"><p class="video-title">{{item.worksDesc}}</p>
          <p class="video-source">
            {{ item.authorName }}<i>-</i>{{ item.updateTime | formatDate }}
          </p></div>
          
        </div>
      </template>
    </waterfall>
    <loading :show="loading" />
  </div>
</template>

<script>
/*
  注意:
  1.itemWidth需要与gutterWidth一起使用才会生效，否则会进行自适应宽度
  2.使用了waterfall的组件不允许使用scoped,否则样式会有问题
*/
// import Vue from 'vue'
import { getHomeListApi } from "@/api/home";
import loading from "./loading";
import { formatDate } from "@/utils/date";
export default {
  props: {
    title: String,
  },
  components: {
    loading,
  },
  data() {
    return {
      col: 5,
      homeList: [],
      loading: false,
    };
  },
  filters: {
    filterNumber(arg) {
      if (arg.toString().length > 4) {
        const volume = arg / 10000;
        const realVal = parseFloat(volume).toFixed(0);
        return realVal + "w";
      } else {
        return arg;
      }
    },
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      // let date = new Date(time);
      var data = new Date(time);
      var dateTimeStamp = data.getTime();
      var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
      var hour = minute * 60;
      var day = hour * 24;
      // var week = day * 7;
      // var month = day * 30;
      // var year = month * 12;
      var now = new Date().getTime(); //获取当前时间毫秒
      var diffValue = now - dateTimeStamp; //时间差

      var result = "";
      if (diffValue < 0) {
        result = "" + "未来";
      }
      var minC = diffValue / minute; //计算时间差的分，时，天，周，月
      var hourC = diffValue / hour;
      var dayC = diffValue / day;
      // var weekC = diffValue / week;
      // var monthC = diffValue / month;
      // var yearC = diffValue / year;

      if (dayC >= 1 && dayC <= 6) {
        result = " " + parseInt(dayC) + "天前";
      } else if (hourC >= 1 && hourC <= 23) {
        result = " " + parseInt(hourC) + "小时前";
      } else if (minC >= 1 && minC <= 59) {
        result = " " + parseInt(minC) + "分钟前";
      } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
      } else {
        return formatDate(data, "yyyy年MM月dd日");
      }

      console.log(result);
      return result;
      // return formatDate(date, "yyyy-MM-dd hh:mm");
      //  "yyyy-MM-dd hh:mm:ss"
    },
    filterDotNumber(arg) {
      if (arg.toString().length > 4) {
        const volume = arg / 10000;
        const realVal = parseFloat(volume).toFixed(1);
        return realVal + "w";
      } else {
        return arg;
      }
    },
    formatSec(time) {
      const min =
        parseInt((time % 3600) / 60) < 10
          ? "0" + parseInt((time % 3600) / 60)
          : parseInt((time % 3600) / 60);
      const sec =
        parseInt((time % 3600) % 60) < 10
          ? "0" + parseInt((time % 3600) % 60)
          : parseInt((time % 3600) % 60);
      return min + ":" + sec;
    },
  },
  computed: {
    itemWidth() {
      return 133 * 0.5 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 0 * 0.5 * (document.documentElement.clientWidth / 375);
      
    },
  },
  mounted() {
    window.addEventListener(
      "scroll",
      () => {
        let s = document.documentElement.scrollTop || document.body.scrollTop;
      },
      true
    );
    var that = this;
    const scrollview = this.$refs["scrollview"];
    // 添加滚动监听，该滚动监听了拖拽滚动条
    // 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调
    scrollview.addEventListener("scroll", that.loadmore(), true);
  },
  methods: {
    getHomeListFun() {
      var userId = -1;
      if (this.userInfo != null || this.userInfo != undefined) {
        userId = this.userInfo.userId;
      }
      getHomeListApi({
        userId: userId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.homeList = res.data.data;
          // this.waterFall();
        }
      });
    },
   
    loadmore(num) {
      console.log("loadmore");
      this.loading = true;
      setTimeout(() => {
        this.homeList = this.homeList.concat(
          this.homeList,
          this.homeList,
          this.homeList
        );
        this.loading = false;
      }, 1000);
    },
  },
  created() {
    this.getHomeListFun();
    var self = this;
     if(document.documentElement.clientWidth<800){
        this.col = 2
    }

  },
};
</script>
<style lang="css" scoped>
.container-water-fall {
  /* padding-top: 30px; */
  box-sizing: border-box;
}
/* .container-water-fall h4 {
  padding-top: 56px;
  padding-bottom: 28px;
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #000000;
  letter-spacing: 1px;
  text-align: justify;
} */
.container-water-fall button {
  background-color: yellow;
  color: #24292e;
  border: 1px solid rgba(27, 31, 35, 0.2);
  border-radius: 0.25em;
  width: 100px;
  line-height: 26px;
  font-size: 13px;
  margin: 4px 0;
  margin-right: 4px;
  cursor: pointer;
  outline: none;
}
/* .container-water-fall button.blue-light {
  background: #27fbc2;
}
.container-water-fall button:hover {
  background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);
} */
.container-water-fall .cell-item {
  width: 100%;
   border-radius: 5px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 6px;
}
.cell-itm-word{
 background: #252632;
    border-radius: 0 0 5px 5px;
    padding: 7px 0 2px 0;
}
.container-water-fall .cell-item img {
  width: 100%;
  height: auto;
   /* width: 100%;
  height: 100%; */
  border-radius: 5px 5px 0 0;
  display: block;
}
/* .container-water-fall .cell-item .item-body {
  padding: 12px;
} */
/* .container-water-fall .cell-item .item-body .item-desc {
  font-size: 15px;
  color: #333333;
  line-height: 15px;
  font-weight: bold;
}
.container-water-fall .cell-item .item-body .item-footer {
  margin-top: 22px;
  position: relative;
  display: flex;
  align-items: center;
}
.container-water-fall .cell-item .item-body .item-footer .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.container-water-fall .cell-item .item-body .item-footer .name {
  max-width: 150px;
  margin-left: 10px;
  font-size: 14px;
  color: #999999;
}
.container-water-fall .cell-item .item-body .item-footer .like {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
} */
/* .container-water-fall
  .cell-item
  .item-body
  .item-footer
  .like.active
  .like-total {
  color: #ff4479;
} */
/* .container-water-fall .cell-item .item-body .item-footer .like i {
  width: 28px;
  display: block;
}
.container-water-fall .cell-item .item-body .item-footer .like .like-total {
  margin-left: 10px;
  font-size: 12px;
  color: #999999;
} */
/* .githubdata {
  float: right;
  margin-right: 90px;
}
.githubdata img {
  width: 14px;
} */
/* .action {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background: white;
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
} */

.video-source {
  font-size: 12px;
  color: rgb(153 153 153);
  margin: 6px 0 10px 10px;
}
.video-source i {
  margin: 0 8px;
}
.video-title {
  font-size: 14px;
  padding: 0 8px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #fff;
  display: -webkit-box;
}
.video-number {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
  bottom: 0px;
  height: 45px;
  opacity: 0.8;
  position: absolute;
  width: 100%;
}
.video-number span {
  align-items: center;
  bottom: 4px;
  color: #fff;
  display: flex;
  flex-direction: row;
  font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  left: 8px;
  line-height: 22px;
  position: absolute;
}
.video-number .icon-aixin:before {
  margin-right: 2px;
}
.video-time {
  right: 8px;
  margin-left: auto;
  background: #4f4f4f;
  height: 22px;
  border-radius: 7px;
  width: 45px;
}
</style>
